<template>
  <div class="page-cont">
    <van-nav-bar
      title="周计划管理"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="btn">
      <van-button
        type="info"
        size="small"
        block
        @click="$router.push('/weekplan/append')"
      >
        + 新增
      </van-button>
    </div>
    <scroll-list
      v-model="list"
      @onLoad="onLoad"
    >
      <week-plan-item
        :plan="plan"
        v-for="(plan, i) in list"
        :key="i"
        @edit="editItem(i)"
        @remove="removeItem(i)"
      />
    </scroll-list>
  </div>
</template>

<script>
import ScrollList from "@/components/ScrollList/index.vue";
import WeekPlanItem from "./components/WeekPlanItem.vue";
export default {
  name: "PlanPage",
  components: {
    ScrollList,
    WeekPlanItem,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    editItem(index) {
      let item = this.list[index];
      this.$router.push({
        path: `/weekplan/${item.id}`,
        query: {
          json: JSON.stringify(item),
        },
      });
    },
    async removeItem(index) {
      let item = this.list[index];
      await this.api.DEL_WEEK_PLAN(item.id);
      this.list.splice(index, 1);
    },
    async onLoad(page, done) {
      // 模拟获取数据
      let res = await this.api.GET_WEEK_PLAN_LIST({
        pageNo: page,
        pageSize: 10,
      });
      this.list.push(...res.list);

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
